<script setup>
import { ref } from 'vue'

const dealerid = defineModel('dealerid', { type: [Number, String], default: '' })

const props = defineProps({
  clearable: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['change'])

const options = ref([])
async function initData() {
  const res = await window.api.getDealerList(20000000, 0, 0, '')
  options.value = res.rows
}
initData()

const loading = ref(false)
async function remoteMethod(query) {
  loading.value = true
  const res = await window.api.getDealerList(20000000, 0, 0, query)
  loading.value = false
  console.log(res)

  options.value = res.rows
}

function handleChange(e) {
  let obj = null
  options.value.forEach((item) => {
    if (item.dealer_id == e) {
      obj = item
    }
  })
  emits('change', obj)
}
</script>

<template>
  <el-select
    v-model="dealerid"
    filterable
    remote
    reserve-keyword
    placeholder="经销商名称搜索"
    :remote-method="remoteMethod"
    :loading="loading"
    :clearable="props.clearable"
    :disabled="props.disabled"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.dealer_id"
      :label="item.dealer_level_name + item.dealer_name"
      :value="item.dealer_id"
    />
  </el-select>
</template>
